<template>
  <div class="index">
    <div class="formBox">
        <p class="item"><span class="name">商品编码 ：</span><input v-model="date.goods_sn" class="slong" placeholder="请输入内容"></input></p>
        <p class="item"><span class="name">商品名称 ：</span><input v-model="date.goods_name" class="slong" placeholder="请输入内容"></input></p>
        <p class="item"><span class="name">商品图片 ：</span>
            <img class="t2" :src="date.goods_logo">
            <input type="file" @change="upImg" id="imgTest" class="mel" accept=".gif,.jpg,.jpeg,.png" name="">
        </p>
        <p class="item"><span class="name">商品价格 ：</span>
            <input v-model="date.goods_price" value="" class="solt" placeholder="请输入内容"></input>
        </p>

        <p class="item"><span class="name">进货价格 ：</span>
            <input v-model="date.market_price" value="" class="solt" placeholder="请输入内容"></input>
        </p>
        <p class="item"><span class="name">保质日期 ：</span>
            <input v-model="date.goods_created_at" value="" class="solt" placeholder="请输入内容"></input>
        </p>

        <p class="item"><span class="name">商品库存 ：</span>
            <input v-model="date.goods_number" class="solt" placeholder="请输入内容"></input>
        </p>
        <p class="item"><span class="name">商品重量 ：</span>
            <input v-model="date.goods_weight" class="solt" placeholder="请输入内容"></input>
        </p>
        <p class="item"><span class="name">顶级分类 ：</span>
            <select v-model="last">
              <option v-for="(item,index) in list" :value="item.id">{{item.category_name}}</option>
            </select>
        </p>
        <p class="item"><span class="name">二级分类 ：</span>
          
            <select v-model="date.category_id">
              <option v-for="(item,index) in sonData" :value="item.id">{{item.category_name}}</option>
            </select>
        </p>
        <p class="item"><span class="name">是否上架 ：</span>
            <select v-model="date.is_sale">
              <option value="1">上架</option>
              <option value="2">下架</option>
            </select>
        </p>
        <p class="item"><span class="name">是否热门 ：</span>
            <select v-model="date.is_hot">
              <option value ="1">热门</option>
              <option value ="2">不热门</option>
            </select>
        </p>
        <p class="item"><span class="name">是否推荐 ：</span>
            <select v-model="date.is_recommend">
              <option value ="1">推荐</option>
              <option value ="2">不推荐</option>
            </select>
        </p>
        <p class="item"><span class="name">搜索关键字 ：</span>
            <input type="text" v-model="date.keyword" name="" placeholder="请输入内容">
        </p>
        <p class="item inputBox"><button @click="submit" class="submitInput">确定</button><button @click="empty" class="emptyInput">重置</button></p>
    </div>
    
  </div>
</template>
<script>
import Vue from 'vue'
import axios from 'axios'
import { Get, Post ,Put ,Delete} from '@/config/api'

export default {
  name: 'index',
  data() {
    return {
        list:[],
        listId:'',
        last:1,//顶级分类
        date:{
          goods_sn:'',
          goods_name:'',
          goods_logo:'',
          goods_price:'',
          goods_number:'',
          goods_weight:'',
          category_id:1,
          is_sale:1,
          is_hot:1,
          is_recommend:1,
          keyword:'',
          market_price:'',//进货价
          goods_created_at:''//保质日期
        },
        type:[]
    }
  },
  mounted(){
    this.getData()
  },
  watch:{
  },
  created(){
    this.getData()
  },
  computed:{
    //检查表单
    VueFrom(){
      if(this.Input(this.date.goods_name)&&this.Input(this.date.goods_logo)&&this.Input(this.date.goods_price)&&this.Input(this.date.goods_number)){
        return true
      }else{
        return false
      }
    },
    sonData(){
      let data
      for(let i=0;i<this.list.length;i++){
        if(this.list[i].id==this.last){
          data=this.list[i].son
        }
      }
      return data
    }
  },

  methods: {
    //获取商品分类
    async getData() {
      if(this.Check()){
        let reg=await Get('/goods/category/all',this.$store.state.token)
        this.list=reg.data
      }
    },
    async submit() {
      if(this.VueFrom){
        this.$store.dispatch("loadOpen");
        let that=this
        let data={
            "goods_sn":this.date.goods_sn,
            "goods_name":this.date.goods_name,
            "goods_logo":this.date.goods_logo,
            "goods_price":this.date.goods_price,
            "goods_number":this.date.goods_number,
            "goods_weight":this.date.goods_weight,
            "category_id":this.date.category_id,
            "is_sale":this.date.is_sale,
            "is_hot":this.date.is_hot,
            "is_recommend":this.date.is_recommend,
            "keyword":this.date.keyword,
            "market_price":this.date.market_price,
            "goods_created_at":this.date.goods_created_at
        };
        console.log(data)
        await Post('/goods',this.$store.state.token,data).then(function(reg){
          console.log(reg)
          this.listId=reg.data.id
          this.addMore(reg.data.id)
        }.bind(this)).catch(function(err){
          console.log(err)
          alert(err.data.message);
          this.$store.dispatch("loadClose");
        }.bind(this))
        
        
      }else{
        alert('请正确填写信息')
      }
    },
    change(val){
      console.log(val)
    },
    //添加详细信息
    async addMore(val){
      let date={
        "goods_id":val,
        "describe":"商品详情描述"
      }
      await Post('/goods/describe',this.$store.state.token,date).then(function(){
        alert('添加成功')
      })
      this.$store.dispatch("loadClose");
      this.$router.push('/prcList')
    },
    //清空信息
    empty() {
      for(var key in this.date){
        this.date[key]=''
      }
    },
    //图片上传
    upImg(e){
      let file = e.target.files[0]; //input 
      if( file.size > 0.3*1024*1024 ){  //用size属性判断文件大小不能超过200k
        alert( "你上传的文件太大了！" ) 
      }else{
        let that=this
        let reader = new FileReader(); 
        reader.readAsDataURL(file); 
        reader.onload = function(e){ 
          var res = this.result; 
          that.date.goods_logo=this.result 
        } 
      } 
    }

  }
}

</script>
